<template>
	<view>
		<!-- 状态栏 -->
		<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="myheader padding-sm  flex justify-between">
			<view class="font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				久坐提醒
			</view>
			<text class="font-sub-title" @click="save">保存</text>
		</view>
		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content">
					<text>久坐提醒</text>
				</view>
				<view class="action text-gray">
					<switch class="blue" @change="open" :class="isOpen?'checked':''" :checked="isOpen"></switch>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text>间隔</text>
				</view>
				<view class="action text-gray">
					<picker mode="selector" :range="timeList" :value="timeIndex" @change="bindTimeChange">
						<view>{{timeList[timeIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text>重复</text>
				</view>
				<view class="action text-gray">
					
				</view>
				<view class="ul" >
					<view class="li" @click="changeWeek(index)" :class="{ active: str.substring(str.length-1-index,str.length-index) == 1 }" v-for="(item,index) in weekList">
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="cu-item" style="background-color: rgba(0,0,0,0.1);">
				<view class="content">
					<text>提醒时段1：</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text>开始时间</text>
				</view>
				<view class="action text-gray">
					<picker mode="time" :value="startTime1" @change="bindstartTime1Change">
						<view>{{startTime1}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text>结束时间</text>
				</view>
				<view class="action text-gray">
					<picker mode="time" :value="endTime1" @change="bindendTime1Change">
						<view>{{endTime1}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-item"  style="background-color: rgba(0,0,0,0.1);">
				<view class="content">
					<text>提醒时段2：</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text>开始时间</text>
				</view>
				<view class="action text-gray">
					<picker mode="time" :value="startTime2" @change="bindstartTime2Change">
						<view>{{startTime2}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text>结束时间</text>
				</view>
				<view class="action text-gray">
					<picker mode="time" :value="endTime2" @change="bindendTime2Change">
						<view>{{endTime2}}</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const bandSDK = uni.requireNativePlugin('BandSDK')
	var that;
	export default {
		data() {
			return {
				statusBarHeight: Vue.prototype.StatusBar,
				isOpen:uni.getStorageSync("longsiteOpen")||false,
				timeList:['15min','30min','45min','60min'],
				timeIndex:uni.getStorageSync('timeIndex')||0,
				startTime1:uni.getStorageSync("startTime1")||'08:00',
				endTime1:uni.getStorageSync("endTime1")||'12:00',
				startTime2:uni.getStorageSync("startTime2")||'14:00',
				endTime2:uni.getStorageSync("endTime2")||'18:00',
				repeat:'',
				weekList:['周一','周二','周三','周四','周五','周六','周日'],
				str:'',
			}
		},
		onShow(){
			that=this;
			var repeat = uni.getStorageSync("repeat")||31
			this.str = repeat.toString(2)
			var len = 8-this.str.length
			if(this.str.length!=8){
				for(var i=0;i<len;i++){
					this.str='0'+this.str;
				}
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			changeWeek(i){
				var a = this.str[this.str.length-i-1]
				if(a==0||a==undefined){
					a=1
				}else{
					a=0
				}
				this.str = this.str.substring(0,this.str.length-i-1) +a+ this.str.substring(this.str.length-i)
			},
			open(e){
				this.isOpen= e.target.value
			},
			bindTimeChange(e){
				this.timeIndex = e.target.value
			},
			bindstartTime1Change(e){
				this.startTime1=e.target.value
			},
			bindstartTime2Change(e){
				this.startTime2=e.target.value
			},
			bindendTime1Change(e){
				this.endTime1=e.target.value
			},
			bindendTime2Change(e){
				this.endTime2=e.target.value
			},
			save(){
				if(this.isOpen){
					this.str = '1'+this.str.substring(1)
					this.repeat = parseInt(this.str,2)
				}else{
					this.str = '0'+this.str.substring(1)
					this.repeat = parseInt(this.str,2)
				}
				bandSDK.settingLongsite({
					time1StartHour:that.startTime1.substring(0,2),
					time1StartMin:that.startTime1.substring(3,5),
					time1EndHour:that.endTime1.substring(0,2),
					time1EndMin:that.endTime1.substring(3,5),
					time2StartHour:that.startTime2.substring(0,2),
					time2StartMin:that.startTime2.substring(3,5),
					time2EndHour:that.endTime2.substring(0,2),
					time2EndMin:that.endTime2.substring(3,5),
					intervalTime:that.timeList[that.timeIndex].substring(0,2),
					repeat:that.repeat
				},res=>{
					
					if(res=='success'){
						uni.setStorageSync('startTime1',that.startTime1)
						uni.setStorageSync('startTime2',that.startTime2)
						uni.setStorageSync('endTime1',that.endTime1)
						uni.setStorageSync('endTime2',that.endTime2)
						uni.setStorageSync('repeat',that.repeat)
						uni.setStorageSync('longsiteOpen',that.isOpen)
						uni.setStorageSync('timeIndex',that.timeIndex)
						uni.showToast({
							"title":"保存成功"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 650rpx;
	.li {
		padding: 0 10rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		color: #222;
		border-radius: 10rpx;
		margin: 5rpx 0 5rpx 20rpx;
		background: #f4f5f9;

		&.active {
			font-weight: 500;
			background: #649df1;
			color:white;
		}
	}
}
</style>
